<template>
  <div class="police-container" :style="[{'zoom': zoom}]">
    <div class="list-search">
      <div class="singe-search">
        <el-select v-model="pageForm.category" placeholder="请选择类别" @change="categoryChange" style="width: 100%;">
          <el-option
            v-for="item in categoryList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </div>
      <div class="singe-search">
        <el-select v-model="pageForm.type" placeholder="请选择类型" :disabled="!pageForm.category" style="width: 100%;">
          <el-option
            v-for="item in typeList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </div>
      <div class="singe-search">
        <el-date-picker ref="daterange" v-model="daterange" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="singe-search">
        <el-cascader
          v-model="pageForm.deptId"
          :props="deptProps"
          :options="deptOptions"
          clearable
          :show-all-levels="false"
          @change="handleDeptChange"
          placeholder="请选择部门"></el-cascader>
      </div>
      <div class="singe-search">
        <el-radio-group v-model="pageForm.status">
          <el-radio v-model="radio" :label="1">出警</el-radio>
          <el-radio v-model="radio" :label="0">未出警</el-radio>
        </el-radio-group>
      </div>
      <div class="singe-search">
        <el-button class="singe-search-btn1" @click="queryList">查询</el-button>
        <el-button class="singe-search-btn2" @click="resetForm">重置</el-button>
        <el-button class="singe-search-btn1" @click="handleExport" v-if="activeName === 'list'">导出</el-button>
      </div>
      <div class="singe-search" style="position: absolute; right: 0px">
        <el-button class="singe-search-btn1" @click="handleBeforeLeave">{{mode}}</el-button>
      </div>
    </div>
    <div class="table-main" v-if="activeName === 'list'">
      <el-table :data="tableData" style="width: 100%" :height="tableHeight">
        <el-table-column type="index" label="序号" width="70" align="center">
        </el-table-column>
        <el-table-column prop="category" label="类别" min-width="80" :formatter="formatterCategory">
        </el-table-column>
        <el-table-column prop="type" label="类型" min-width="80" :formatter="formatterType">
        </el-table-column>
        <el-table-column prop="caller" label="报警人" min-width="80">
        </el-table-column>
        <el-table-column prop="callerPhone" label="报警手机号" min-width="110">
        </el-table-column>
        <el-table-column prop="createTime" label="报警时间" min-width="150">
        </el-table-column>
        <el-table-column prop="wecomDept" label="部门" min-width="240" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="wecomOfficer" label="出警人" min-width="120">
        </el-table-column>
        <el-table-column prop="smsList" label="短信发送" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.smsList.length === 0" style="color: #EB5757;">未发送</span>
            <div v-else @click="handleOpenSmsSendingSituationDialog(scope.row)"
                 style="width: 66px;height: 26px;margin-left: 10px; background: rgba(85,144,200,0.05);border-radius: 2px 2px 2px 2px;
                 opacity: 1;border: 1px solid rgba(54,121,222,0.55); text-align: center; cursor: pointer;">
              {{ scope.row.smsList.length }}条
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="smsLastSendTime" label="最新发送时间" min-width="150">
        </el-table-column>
        <el-table-column prop="field7" label="出警地图" min-width="100">
          <template slot-scope="scope">
            <img style="width: 63px; height: 34px; cursor: pointer;" v-if="scope.row.feedBackList.length > 0"
                 src="../../img/images/policeInformation/ic_ditu.png"
                 @click="handleOpenPoliceInformationMapDialog(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="通知出警" min-width="90" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">是</span>
            <span style="color: #EB5757" v-else>否</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageForm.current" :page-sizes="[10, 20, 50, 100]" :page-size="pageForm.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="pageForm.total">
      </el-pagination>
    </div>
    <div class="heatMap-main" :style="[{'height': heatMapMainHeight + 'px'}]" v-else>
      <img class="shixiang" src="../../img/images/policeInformation/ic_shixiang.png">
      <span class="title">警情热力图</span>
      <div class="heatMap" id="heatMap" :style="[{'height': (heatMapMainHeight - 84) + 'px'}]">
      </div>
      <div class="board summary">
        <img class="icon" src="../../img/images/policeInformation/ic_1.png"/>
        <span class="label">警情总数(条)</span>
        <span class="value">{{summary.count}}</span>
      </div>
      <div class="board sendSummary">
        <img class="icon" src="../../img/images/policeInformation/ic_2.png"/>
        <span class="label">短信发送总数(条)</span>
        <span class="value">{{summary.smsCount}}</span>
      </div>
      <div class="board generateMapSummary">
        <img class="icon" src="../../img/images/policeInformation/ic_3.png"/>
        <span class="label">生成出警地图总数(条)</span>
        <span class="value">{{summary.withCoordinateCount}}</span>
      </div>
      <div class="board notificationSummary">
        <img class="icon" src="../../img/images/policeInformation/ic_4.png"/>
        <span class="label">通知出警总数(条)</span>
        <span class="value">{{summary.settledCount}}</span>
      </div>
    </div>
    <el-dialog title="短信发送情况" :visible.sync="smsSendingSituationDialogVisible" width="728px"
               :before-close="handleCloseSmsSendingSituationDialog" append-to-body destroy-on-close
               :close-on-click-modal="false"
               custom-class="smsSendingSituationDialog">
      <el-table :data="smsList" style="width: 100%; margin-bottom: 30px;" height="280" border>
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column min-width="120" label="报警人" :show-overflow-tooltip="true" prop="sender">
        </el-table-column>
        <el-table-column min-width="120" label="报警手机号" :show-overflow-tooltip="true" prop="receiverPhone">
        </el-table-column>
        <el-table-column min-width="120" label="发送时间" :show-overflow-tooltip="true" prop="createTime">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="出警地图" :visible.sync="policeInformationMapDialogVisible" width="1160px" top="50px"
               :before-close="handleClosePoliceInformationMapDialog" append-to-body destroy-on-close
               :close-on-click-modal="false" custom-class="policeInformationMapDialog">
      <el-table ref="singleTable" :data="tableData2" style="width: 100%; margin-bottom: 24px;" height="250" border
                highlight-current-row
                @current-change="handleTable2CurrentChange">
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column min-width="70" label="报警人" :show-overflow-tooltip="true" prop="caller">
        </el-table-column>
        <el-table-column min-width="90" label="报警手机号" :show-overflow-tooltip="true" prop="callerPhone">
        </el-table-column>
        <el-table-column min-width="120" label="地址反馈时间" :show-overflow-tooltip="true" prop="feedbackTime">
        </el-table-column>
        <el-table-column min-width="120" label="地图地址" :show-overflow-tooltip="true" prop="mapAddress">
        </el-table-column>
        <el-table-column min-width="140" label="经纬度信息" :show-overflow-tooltip="true" prop="coordinates">
        </el-table-column>
        <el-table-column min-width="120" label="部门" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-select v-model="scope.row.deptId" placeholder="请选择部门" @change="deptChange(scope.row, $event)">
              <el-option
                v-for="item in scope.row.deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column min-width="120" label="部门负责人" :show-overflow-tooltip="true" prop="leader">
        </el-table-column>
      </el-table>
      <div class="map" id="map">
      </div>
      <span slot="footer" class="dialog-footer">
<!--				<el-button @click="handleClosePoliceInformationMapDialog" v-if="isShowPoliceBut">取消</el-button>-->
<!--				<el-button type="primary" @click="submitMap" v-if="isShowPoliceBut">快速出警</el-button>-->
			</span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  getForChart
} from '../../api/policeInformation/list.js';
import {
  getDeptTreeAuth
} from '../../api/system/dept.js';
import AMapLoader from '@amap/amap-jsapi-loader';
import {sendPolice} from "@/api/policeInformation/add";
import {getToken} from "@/util/auth";
import {tansParams} from '@/util/util';
import {getDictionary} from "@/api/system/dict";

export default {
  name: 'PoliceInformationList',
  data() {
    return {
      width: 1848,
      zoom: 1,
      activeName: 'heatMap',
      mode: '切换列表',
      daterange: [],
      deptProps: {
        value: 'value',
        label: 'title',
        children: 'children'
      },
      deptOptions: [],
      pageForm: {
        current: 1,
        size: 10,
        total: 0,
        deptId: '',
        status: ''
      },
      tableData: [],
      smsSendingSituationDialogVisible: false,
      policeInformationMapDialogVisible: false,
      isShowPoliceBut: true,
      sendPoliceData: {},
      tableData2: [],
      smsList: [],
      AMap: undefined,
      map: undefined,
      polygon: undefined,
      marker: undefined,
      lngLat: undefined,
      summary: {},
      categoryMap: {},
      categoryList: [],
      categoryTypeMap: {},
      typeMap: {},
      typeList: [],
    }
  },
  computed: {
    tableHeight() {
      let h = document.body.clientHeight - 285;
      return h;
    },
    heatMapMainHeight() {
      let h = document.body.clientHeight - 235;
      return h;
    }
  },
  mounted() {
    let self = this;
    window.addEventListener('resize', () => {
      self.getZoom();
    });
    this.getZoom();
    this.getCategory();
    this.getDeptTreeAuth();
    if (this.activeName === 'list') {
      this.getList();
    } else {
      this.getHeatMapData();
    }
  },
  methods: {
    getZoom() {
      let self = this;
      let w = document.body.clientWidth;
      if (w < self.width) {
        self.zoom = (w / self.width) - 0.1;
      } else {
        self.zoom = 1;
      }
    },
    formatterCategory(row, column, cellValue, index) {
      return this.categoryMap[cellValue];
    },
    formatterType(row, column, cellValue, index) {
      return this.typeMap[row.category + '_' + cellValue];
    },
    // 警情类别
    getCategory() {
      let self = this;
      getDictionary({code: 'police_biz_category'}).then(res => {
        let {data} = res.data;
        self.categoryList = data;
        if (data && data.length > 0) {
          let categoryMap = {};
          data.forEach(item => {
            categoryMap[item.dictKey] = item.dictValue;
            self.getType(item.dictKey);
          })
          self.categoryMap = categoryMap;
        }
      })
    },
    // 警情类型
    getType(category) {
      let self = this;
      getDictionary({code: 'police_category_' + category}).then(res => {
        let {data} = res.data;
        if (data && data.length > 0) {
          self.categoryTypeMap[category] = data;
          data.forEach(item => {
            self.typeMap[category + '_' + item.dictKey] = item.dictValue;
          })
        }
      })
    },
    categoryChange(category) {
      this.typeList = this.categoryTypeMap[category];
    },
    handleExport() {
      let self = this;
      this.$confirm("是否导出出警列表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = {
          deptId: self.pageForm.deptId,
          status: self.pageForm.status,
          category: self.pageForm.category,
          type: self.pageForm.type
        }
        if (self.daterange) {
          params.startDate = self.daterange[0];
          params.endDate = self.daterange[1];
        }
        let paramsStr = tansParams(params);
        window.open(`/api/policesituation/export?${this.website.tokenHeader}=${getToken()}&${paramsStr}`);
      });
    },
    // 初始化热热力图
    initHeatMap(pointList) {
      let self = this;
      AMapLoader.load({
        key: "5da1f8bb31f8532695a0fb696d584fae", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.HeatMap'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        //加载 AMapUI
        AMapUI: {
          version: "1.1", // AMapUI 版本
        }
      })
        .then((AMap) => {
          self.AMap = AMap;
          self.map = new AMap.Map("heatMap", {
            // 设置地图容器id
            // viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [122.766159, 41.517449], // 初始化地图中心点位置，沈阳中心点
          });
          console.log('热力点', pointList);
          let heatMap = new self.AMap.HeatMap(self.map, {
            radius: 15
          });
          // 设置热力图数据集
          heatMap.setDataSet({data: pointList});
          // self.map.add(heatMap);
          // self.map.setFitView(heatMap);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleBeforeLeave() {
      if (this.activeName === 'list') {
        this.activeName = 'heatMap';
        this.mode = "切换列表";
        this.getHeatMapData();
      } else {
        this.activeName = 'list';
        this.mode = "切换热力图";
        this.AMap = undefined;
        if (this.map) {
          this.map.destroy();
          this.map = undefined;
        }
        this.getList();
      }
    },
    getHeatMapData () {
      let self = this;
      if (this.daterange) {
        this.pageForm.startDate = this.daterange[0];
        this.pageForm.endDate = this.daterange[1];
      }
      getForChart(this.pageForm).then(res => {
        const {code, data} = res.data;
        if (200 === code) {
          self.initHeatMap(data.pointList);
          self.summary = data;
        }
      })
    },
    // 打开短信发送情况弹框
    handleOpenSmsSendingSituationDialog: function (row) {
      this.smsList = row.smsList;
      this.smsSendingSituationDialogVisible = true;
    },
    // 关闭短信发送情况弹框
    handleCloseSmsSendingSituationDialog: function () {
      this.smsSendingSituationDialogVisible = false;
    },
    handleTable2CurrentChange(row) {
      this.sendPoliceData.feedbackId = row.id;
      if (row && row.coordinates && this.map && this.AMap) {
        this.map.clearMap();
        let lngLat = row.coordinates.split(",");
        let self = this;
        this.$nextTick(() => {
          let marker = new self.AMap.Marker({
            position: new self.AMap.LngLat(lngLat[0], lngLat[1]),
            anchor: 'bottom-center',
          });
          self.map.add(marker);
          self.map.setFitView(marker);
          self.map.setZoom(14);
        })
      } else {
        this.lngLat = row.coordinates.split(",");
      }
    },
    deptChange(row, e) {
      let leader = '';
      row.deptList.forEach(item => {
        if (item.id === e) {
          leader = item.leader;
        }
      })
      this.$set(row, 'leader', leader);
    },
    // 打开警情地图弹框
    handleOpenPoliceInformationMapDialog: function (row) {
      let self = this;
      if (row.feedBackList && row.feedBackList.length > 0) {
        this.sendPoliceData.id = row.id;
        this.tableData2 = row.feedBackList;
        this.lngLat = this.tableData2[0].coordinates.split(',');
        this.tableData2.forEach(item => {
          item.caller = row.caller;
          item.callerPhone = row.callerPhone;
          if (item.deptList && item.deptList.length > 0) {
            item.deptId = item.deptList[0].id;
            self.deptChange(item, item.deptId);
          }
        });
        this.policeInformationMapDialogVisible = true;
        if (row.status === 1) {
          this.isShowPoliceBut = false;
        } else {
          this.isShowPoliceBut = true;
        }
        this.initAMap();
        this.$nextTick(() => {
          if (self.$refs.singleTable) {
            self.$refs.singleTable.setCurrentRow(self.tableData2[0]);
          }
        })
      } else {
        this.$confirm('报警人未上传位置信息, 是否继续出警?', '请确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.id
          }
          sendPolice(data).then(res => {
            console.log(res);
            const {code} = res.data;
            if (200 === code) {
              this.$message({
                message: '已出警',
                type: 'success'
              });
              self.queryList();
              self.getGeneralView();
            } else {
              this.$message({
                message: '出警失败',
                type: 'success'
              });
            }
          })
        });
      }
    },
    // 关闭警情地图弹框
    handleClosePoliceInformationMapDialog: function () {
      this.policeInformationMapDialogVisible = false;
      this.AMap = undefined;
      this.polygon = undefined;
      this.marker = undefined;
      if (this.map) {
        this.map.destroy();
        this.map = undefined;
      }
    },
    // 初始化地图
    initAMap() {
      let self = this;
      AMapLoader.load({
        key: "5da1f8bb31f8532695a0fb696d584fae", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Polygon', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        //加载 AMapUI
        AMapUI: {
          version: "1.1", // AMapUI 版本
        }
      })
        .then((AMap) => {
          self.AMap = AMap;
          self.map = new AMap.Map("map", {
            WebGLParams: {
              preserveDrawingBuffer: true
            },
            // 设置地图容器id
            // viewMode: "3D", // 是否为3D地图模式
            zoom: 14, // 初始化地图级别
            center: [122.766159, 41.517449], // 初始化地图中心点位置，沈阳中心点
          });
          console.log("self.lngLat", self.lngLat, self.lngLat[0], self.lngLat[1]);
          let marker = new self.AMap.Marker({
            position: new self.AMap.LngLat(self.lngLat[0], self.lngLat[1]),
            anchor: 'bottom-center',
          });
          self.map.add(marker);
          self.map.setFitView(marker);
          self.map.setZoom(14);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleSizeChange(val) {
      this.pageForm.current = 1;
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.current = val;
      this.getList();
    },
    resetForm() {
      this.pageForm = {
        current: 1,
        size: 20,
        total: 0,
        deptId: '',
        status: ''
      };
      this.daterange = [];
      if (this.activeName === 'list') {
        this.getList();
      } else {
        this.getHeatMapData();
      }
    },
    queryList() {
      this.pageForm.current = 1;
      if (this.activeName === 'list') {
        this.getList();
      } else {
        this.getHeatMapData();
      }
    },
    // 列表查询
    getList: function () {
      let self = this;
      if (this.daterange) {
        this.pageForm.startDate = this.daterange[0];
        this.pageForm.endDate = this.daterange[1];
      } else {
        this.pageForm.startDate = undefined
        this.pageForm.endDate = undefined

      }
      getList(this.pageForm).then(res => {
        const {data, code} = res.data;
        if (code === 200) {
          console.log("列表查询返回值", data);
          self.tableData = data.records;
          self.pageForm.total = res.data.data.total;
          self.pageForm.size = res.data.data.size;
        }
      })
    },
    handleDeptChange(e) {
      console.log('选择部门树', e);
      if (e && e.length === 3) {
        this.pageForm.deptId = e[2];
      }
    },
    getDeptTreeAuth() {
      let self = this;
      getDeptTreeAuth().then(res => {
        const {code, data} = res.data;
        if (200 === code) {
          self.deptOptions = data;
        }
      })
    },
    statusFormatter(row, column, cellValue, index) {
      if (1 === cellValue) {
        return "是";
      } else {
        return "否";
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import '../../styles/page/list';

.police-container {
  padding: 40px;
  width: 100%;
  //height: 100%;
  position: relative;

  .heatMap-main {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 4px;
    margin-top: 0px;
    box-shadow: 0px 6px 40px 5px rgba(0, 0, 0, 0.06), 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
    //margin-left: 10px;
    margin-right: 24px;
    position: relative;

    .shixiang {
      width: 22px;
      height: 22px;
      position: absolute;
      top: 9px;
      left: 20px;
    }

    .title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #2E488B;
      position: absolute;
      top: 9px;
      left: 46px;
    }

    .heatMap {
      width: 1275px;
      background: rgba(236, 245, 255, 0.2);
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid rgba(54, 121, 222, 0.23);
      position: absolute;
      top: 50px;
      left: 22px;
    }

    .board {
      width: 260px;
      height: 102px;
      background: linear-gradient(180deg, #D8EDFD 0%, #FFFFFF 100%);
      box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.05);
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(54, 141, 222, 0.37), rgba(54, 121, 222, 0.18)) 1 1;
      text-align: center;

      .icon {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 10px;
        left: 13px;
      }

      .label {
        position: absolute;
        top: 10px;
        left: 38px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #2A334D;
      }

      .value {
        font-size: 34px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #2E488B;
        line-height: 120px;
      }
    }

    .summary {
      position: absolute;
      top: 54px;
      right: 22px;
    }

    .sendSummary {
      position: absolute;
      top: 179px;
      right: 22px;
    }

    .generateMapSummary {
      position: absolute;
      top: 303px;
      right: 22px;
    }

    .notificationSummary {
      position: absolute;
      top: 426px;
      right: 22px;
    }
  }

  .list-search {
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;

    .singe-search {
      width: auto;
      height: auto;
      line-height: 36px;

      .el-input {
        width: 256px;
        height: 37px;

        ::v-deep .el-input__inner {
          height: 36px;
          line-height: 36px;
        }
      }

      .el-date-editor {
        width: 296px;
        height: 36px;
      }

      ::v-deep .el-cascader {
        width: 206px;
        height: 36px;
        line-height: 0;

        input {
          height: 36px;
          line-height: 0;
        }
      }

      .singe-search-btn1 {
        width: 88px !important;
        height: 36px !important;
        background: #2E488B !important;
        box-shadow: 0px 1px 1px 0px rgba(123, 144, 176, 0.21) !important;
        border-radius: 4px 4px 4px 4px !important;
        opacity: 1 !important;
        padding: 0 !important;

        font-size: 14px !important;
        font-family: PingFang SC-Regular, PingFang SC !important;
        font-weight: 400 !important;
        color: #FFFFFF !important;
      }

      .singe-search-btn2 {
        width: 88px !important;
        height: 36px !important;
        background: #FFFFFF !important;
        box-shadow: 0px 1px 1px 0px rgba(123, 144, 176, 0.21) !important;
        border-radius: 4px 4px 4px 4px !important;
        opacity: 1 !important;
        border: 1px solid #C1D3EE !important;
        padding: 0 !important;

        font-size: 14px !important;
        font-family: PingFang SC-Regular, PingFang SC !important;
        font-weight: 400 !important;
        color: #2E488B !important;
      }
    }
  }
}

::v-deep .policeInformationMapDialog {
  .el-dialog__body {
    max-height: 700px
  }

  .map {
    width: 1078px;
    height: 384px;
    box-shadow: 0px 6px 40px 5px rgba(0, 0, 0, 0.03), 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid rgba(54, 121, 222, 0.5);
  }
}
</style>
